<template>
  <view class="report-pane">
    <charttips name="出租率" tooltip="不计算借出、已处置的车辆"  />
    <uChartArea :uChartData="uChartData" :options="options" canvasId="carHire" tooltipFormat="carUseRateFormatter" />
  </view>
</template>

<script>
  import charttips from '../components/charttips.vue'
  import uChartArea from '../components/uChartArea.vue'

  export default {
    props: {
      info: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        uChartData: {
          categories: [],
          series: [
            {
              name: '出租率',
              data: [],
            },
          ],
        },
        options: {
          dataLabel: false,
          extra: {
            tooltip: {
              showArrow: true,
              legendShow: false,
              bgColor: '#fff',
              fontColor: '#1D2129'
            },
          },
        },
      }
    },
    components: {
      uChartArea,
      charttips
    },
    watch: {
      info: {
        handler(list) {
          let cateGoryList = []
          list.forEach((item) => {
            cateGoryList.push(item.date)
          })
          // this.uChartData.categories = cateGoryList
          // this.uChartData.series[0].data = list.map((item) => item.value)
          this.uChartData.categories = ['3-1', '3-2', '3-3', '3-4', '3-5']
          this.uChartData.series[0].data = [20, 50, 5, 100, 3]
        },
        immediate: true,
      },
    },
  }
</script>

<style lang="less" scoped></style>
